<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
</head>

<body>
  <header>
    <h1>柱状图</h1>
  </header>
  <main class="container">
    <h2>基本柱状图</h2>
    <section>
      <div id="barChart" style="height:50vh"></div>
    </section>
    <h2>分组柱状图</h2>
    <section>
      <div id="groupedBar" style="height:50vh"></div>
    </section>
    <h2>堆叠柱状图</h2>
    <section>
      <div id="stackedBar" style="height:50vh"></div>
    </section>
    <h2>堆叠转换分组柱状图</h2>
    <section>
      <div id="stackedToGroupedBar" style="height:50vh"></div>
    </section>
  </main>

  <script type="module">
    import { BarChart, GroupedBar, StackedBar, StackedToGroupedBar } from '../../dist/ccd3.js'

    d3.csv('./data/barChart.csv').then(data => {
      const barChart = new BarChart('barChart', data)
        .setMargin(25, 35, 50, 50)
        .setXAxisKey('dip')
        .setYAxisKey('visited_times')
        .init()
        .render();

      setInterval(() => {
        data.pop();
        barChart.render();
      }, 1000)
    })

    d3.csv('./data/GroupedBar.csv').then(data => {
      const groupedBar = new GroupedBar('groupedBar', data)
        .setMargin(25, 35, 50, 50)
        .setGroupKey('name')
        // .setFilterKeys(['<10', '10-19', '20-29', '30-39', '40-49'])
        .setYAxisTitle('Population')
        .init()
        .render();

      const stackedBar = new StackedBar('stackedBar', data)
        .setMargin(25, 35, 50, 50)
        .setGroupKey('name')
        // .setFilterKeys(['<10', '10-19', '20-29', '30-39', '40-49'])
        .setYAxisTitle('Population')
        .init()
        .render();

      setInterval(() => {
        data.pop();
        groupedBar.render();
        stackedBar.render();
      }, 1000)
    })

    d3.csv('./data/GroupedBar.csv').then(data => {
      const stackedToGroupedBar = new StackedToGroupedBar('stackedToGroupedBar', data)
        .setMargin(25, 35, 50, 50)
        .setGroupKey('name')
        // .setFilterKeys(['<10', '10-19', '20-29', '30-39', '40-49'])
        .setYAxisTitle('Population')
        .init()
        .render()
      let flag = 1;
      setInterval(() => {
        if (flag) {
          stackedToGroupedBar.transitionGrouped()
        } else {
          stackedToGroupedBar.transitionStacked()
        }
        flag = !flag;
      }, 5000)
    })

  </script>
</body>

</html>